<template>
	<view class="service-list-item">
		<view @tap.stop="goDetail" class="list-item" style="display: flex;">
			<!-- #ifdef H5 -->
			<view class="cover radius-16">
				<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
			<!-- #endif -->
			<view class="flex-1 ml-md" style="display: flex;flex-direction: column;justify-content: space-between;padding: 8rpx 0;width: 50%;">
				<view class="flex-between">
					<view class="f-title c-title text-bold ellipsis" style="max-width: 210rpx;">{{ info.title }}</view>
					<view class="f-caption c-caption mt-sm mb-sm">超{{ info.total_sale }}人选择
					</view>
				</view>
				<view class="f-caption c-caption mt-sm mb-sm" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{ info.sub_title || '' }}
				</view>
				<!-- <view class="f-caption c-caption" v-if="info.material_price*1>0">物料费：¥{{info.material_price}}</view> -->
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="flex-between" style="flex-wrap: wrap;flex: 1;margin-right: 16rpx;">
						<view class="f-desc c-caption ellipsis" style="width: 100%;">
							<view class="" style="display: flex;align-items: center;justify-content: space-between;">
								<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
									<b class="f-caption c-orange">￥</b>
									<view class="f-md-title">
										{{ info.price }}
									</view>
								</view>
								<view class="text-delete" v-if="info.init_price">￥{{ info.init_price }}</view>
							</view>
							<view class="" style="display: flex;align-items: center;justify-content: space-between;">
								<view class="servefc" v-if="info.is_diet == 0">
									<i class="iconfont icon-shijian" :style="{ color: primaryColor }"></i>
									<span class="f-caption c-title ml-sm">{{ info.time_long }}分钟</span>
								</view>
								<view class="f-caption c-caption" style="display: none;">超{{ info.total_sale }}人选择</view>
							</view>
						</view>
					</view>
					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose">
						<view class="flex-between">
							<view class="item-btn flex-center f-caption c-base" :style="{height:'100rpx',background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
								{{ info.is_diet == 1 ? `选择房间` : `选择${$t('action.attendantName')}`}}
							</view>
						</view>
					</auth>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			sid: {
				type: Number,
				default () {
					return 0
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			maxWidth: {
				type: String,
				default () {
					return '490rpx'
				}
			}
		},
		data() {
			return {
				textType: {
					1: '可服务',
					2: '服务中',
					3: '可预约',
					4: '不可预约'
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			// 详情
			goDetail() {
				let {
					id
				} = this.info
				let {
					sid: store_id = 0
				} = this
				let url = `/user/pages/detail?id=${id}&store_id=${store_id}`
				this.$util.goUrl({
					url
				})
			},
			// 选择技-师
			toChoose() {
				// let {
				// 	from
				// } = this
				// if (from == 'technician-info') {
				// 	this.$emit('order')
				// 	return
				// }`/user/pages/order?id=${coach_id}&ser_id=${service_id}`
				if(this.info.is_diet == 1){
					let {
						id
					} = this.info
					let {
						sid: store_id = 0
					} = this
					let url = `/user/pages/choose-technicians?id=${id}&store_id=${store_id}`
					this.$util.goUrl({
						url
					})
				}else{
					let {
						id
					} = this.info
					let {
						sid: store_id = 0
					} = this
					let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}`
					this.$util.goUrl({
						url
					})
				}
			},
			toEmit(key) {
				this.$emit(key)
			}
		}
	}
</script>

<style scoped lang="scss">
	.service-list-item {
		.list-item {
			.cover {
				width: 300rpx;
				height: 300rpx;
			}

			.time-long {
				min-width: 72rpx;
				height: 30rpx;
				padding: 0 5rpx;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFEEB9;
				margin-right: 16rpx;
			}

			.f-icontext {
				font-size: 18rpx;
			}

			.text-delete {
				font-size: 24rpx;
				color: #B9B9B9;
			}

			.item-btn {
				min-width: 165rpx;
				height: 80rpx;
				padding: 0 10rpx;
				border-radius: 20rpx;
			}
		}
	}
	.servefc{
		display: flex;
		align-items: center;
	}	
</style>